<template>
  <el-row>
    <!-- 上传 -->
    <el-col :span="24" v-if="!preview">
      <el-upload action="#" :auto-upload="false" :limit="10" :multiple="multiple" :show-file-list="false" :accept="accept"
        v-model:file-list="uploadList">
        <template #trigger>
          <el-button type="info" size="small">请选择</el-button>
        </template>
        <el-button style="margin-left: 10px;" type="success" size="small" @click="submitUpload">上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
            {{ tip }}
          </div>
        </template>
      </el-upload>
    </el-col>

    <!-- 预览 -->
    <el-col :span="24" style="display: flex;">
      <template v-for="(item, index) in annexes">
        <div class="detail">
          <el-image style="width: 150px; height: 150px;" :src="item.url" :preview-src-list="previewList"
            :initial-index="index" />
          <div class="delete-img" v-if="!preview">
            <el-icon @click="deleteUpload(index)"><el-icon-delete /></el-icon>
          </div>
        </div>
      </template>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: 'AutumnUpload'
}
</script>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { UploadFile } from 'element-plus'
import { $upload, $preview } from 'src/util/tools'
import { saveAnnex, listAnnex, deleteAnnex } from 'src/api/file/index'

//定义通用变量
const uploadList = ref<Array<UploadFile>>([])
const previewList = ref<Array<string>>([])
const annexes = ref<Array<any>>([])

//定义属性
const props = defineProps({
  accept: {
    type: String,
    default() {
      return 'image/jpg,image/jpeg,image/gif,image/png'
    }
  },
  tip: {
    type: String,
    default: () => '请选择JPG、GIF、PNG图片，每张大小不超过1M'
  },
  module: {
    type: String,
    default: () => ''
  },
  businessId: {
    type: String,
    default: () => ''
  },
  multiple: {
    type: Boolean,
    default: () => false
  },
  preview: {
    type: Boolean,
    default: () => false
  }
})

//监听
watch(
  () => props.businessId,
  (newBusinessId) => {
    //业务查询附件
    if (!newBusinessId) {
      return;
    }
    initAnnex()
  }
)

//初始化附件
async function initAnnex() {
  const { data } = await listAnnex(props.businessId)
  if (data.length == 0) return
  previewList.value = []
  for (let i = 0; i < data.length; i++) {
    const item = data[i]

    const url = await $preview(item.fileId)
    item.url = url

    if (item.name.indexOf('jpg') != -1 || item.name.indexOf('jpeg') != -1 || item.name.indexOf('png') != -1 || item.name.indexOf('gif') != -1) {
      previewList.value.push(url)
    }
  }
  annexes.value = data
}

//上传
const submitUpload = async function () {
  const params = new FormData()
  uploadList.value.forEach((file: any) => {
    params.append('files', file.raw)
  })

  //上传文件
  const data = await $upload(params)
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
    item.fileId = item.id
    item.module = props.module
    item.businessId = props.businessId
  }

  //上传附件
  saveAnnex(data).then(() => initAnnex())
  uploadList.value = []
}

// 删除
const deleteUpload = function (index: number) {
  const item = annexes.value[index]
  if (item.id) {
    deleteAnnex([item.id])
  }
  annexes.value.splice(index, 1)
  previewList.value.splice(index, 1)
}

</script>

<style lang="scss" scoped>
.detail {
  display: flex;
  flex-direction: row;

  &:first-child ~ div {
    margin-left: 5px;
  }

  .delete-img {
    position: relative;
    width: 15px;
    height: 15px;

    &:hover {
      cursor: pointer;
    }

    .el-icon {
      position: absolute;
    }
  }
}
</style>
